<template>
  <div>
    <el-table
      :data="tableData"
      height="550"
      border
      style="width: 90%; margin: 15px auto"
    >
      <el-table-column fixed type="index" label="#" width="100">
      </el-table-column>
      <el-table-column prop="name" label="类别" width="800">
        <template slot-scope="scope">
          <el-input
            v-if="scope.$index == 0"
            @keyup.native.enter="addClick"
            placeholder="请输入内容"
            v-model="input"
            clearable
          >
          </el-input>
          <div v-else>
            <el-input
              v-if="scope.row.id == isEasval.id"
              v-focus
              placeholder="请输入内容"
              v-model="isEasval.name"
              @blur="enddateblur(scope.row)"
              @keyup.native.enter="enddateblur(scope.row)"
              @keyup.native.esc="escdateblur(scope.row)"
              clearable
            >
            </el-input>
            <el-button
              v-else
              type="success"
              size="small"
              @dblclick.native="handleClick(scope.row)"
              >{{ scope.row.name }}</el-button
            >
          </div>
        </template>
      </el-table-column>

      <el-table-column fixed="right" label="操作" width="200">
        <template slot-scope="scope">
          <el-button
            v-if="scope.$index == 0"
            type="success"
            size="small"
            @click="addClick"
            >添加</el-button
          >
          <div v-else>
            <el-button
              @click="handleClick(scope.row)"
              type="warning"
              size="small"
              >修改</el-button
            >
            <el-button
              type="danger"
              size="small"
              @click="dleClick(scope.row.id)"
              >删除</el-button
            >
          </div>
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>

<script>
import { mapState, mapActions } from "vuex";
export default {
  data() {
    return {
      input: "",
      isEasval: {},
    };
  },
  mounted() {
    this.getList();
  },
  //获取焦点
  directives: {
    focus: {
      inserted: function (el) {
        el.children[0].focus();
      },
    },
  },
  methods: {
    ...mapActions("classify", ["getList", "addList", "deleList", "updataList"]),
    //添加 && 回车事件
    addClick() {
      this.addList(this.input);
      this.input = "";
    },
    //删除
    dleClick(id) {
      this.$confirm("此操作将永久删除该文件, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          this.deleList(id);
          this.$message({
            type: "success",
            message: "删除成功!",
          });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除",
          });
        });
    },
    //修改
    handleClick(row) {
      this.isEasval = { ...row };
    },
    // 失去焦点 &&  回车事件
    enddateblur(row) {
      this.updataList(this.isEasval);
      this.isEasval = {};
    },
    //esc事件
    escdateblur() {
      this.isEasval = {};
    },
  },
  computed: {
    ...mapState("classify", ["tableData"]),
  },
};
</script>

<style scoped>
</style>